<template>
	<view>
		<view class="index-header">
			<view class="cinema-name" :class="changeColor?'wihte-bg':''">
				<view style="font-size: 28rpx;font-weight: bold;" @click="toSelectCinema"><text>{{name}}</text>
					<van-icon name="arrow-down" size='24rpx' />
				</view>
			</view>
			<swiper :indicator-dots="false" :autoplay="true" style="height: 350rpx;" catchtouchmove>
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		queryCinema,
		getChains,
		getCinemaInfo
	} from '../../common/http/api';
	export default {
		props: ['swiperList', 'changeColor', "showHot"],
		data() {
			return {
				name: '',
				code: '',
				titleBarHeight: '',
				statusBarHeight: '',
				chainsList: [],
				showChains: false,
				showIcon: false,
			}
		},
		methods: {
			initNavBar() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({ //获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
								.statusBarHeight) *
							2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						// 导航栏（胶囊）高度
						this.titleBarHeight = navHeight;
						//  状态栏（顶部）高度
						this.statusBarHeight = res.statusBarHeight
						uni.$emit("sysHeight", {
							titleBarHeight: this.titleBarHeight,
							statusBarHeight: this.statusBarHeight
						})
					}
				})
			},
			queryCinema() {
				queryCinema().then(res => {
					const {
						data
					} = res

					this.code = data.CinemaCode



					this.$store.commit('setScreens', data.Screens)

				})
			},
			cinemaInfo() {
				getCinemaInfo().then(res => {

					this.name = res.cinemaName
					this.$store.commit('setCinemaName', res.cinemaName)
					this.$store.commit('setCinemaPhone', res.cinemaPhone)
					this.$store.commit('setCinemaAddress', res.cinemaAddress)
					uni.setNavigationBarTitle({
						title: res.cinemaName
					})
				})
			},
			changeTab(v) {
				// this.showHot = v;
				this.$emit('changeTab', v)
			},
			onClickHide() {
				this.showChains = false
			},
			toSelectCinema() {
				//跳转选择影院
				uni.navigateTo({
					url: '../../pages/selectCinema/selectCinema?cinemaCode=' + this.code
				})
			},
			toMiniProgram(cinema) {
				if (cinema.cinemaCode == this.code) {
					this.showChains = false
					return
				} else {
					uni.setStorageSync('cinemaCode', cinema.cinemaCode)
					uni.reLaunch({
						url: '../../pages/index/index'
					})
				}
			},
			handleChains() {
				if (this.chainsList.length != 0) this.showChains = true;
			}
		},
		mounted() {
			this.initNavBar()
			this.queryCinema();
			this.cinemaInfo()

		}
	}
</script>

<style lang="scss">
	.index-header {
		width: 100vw;
		background-size: 100% 100%;
		position: relative;

		.cinema-name {
			color: #fff;
			font-size: 26rpx;
			padding: 15rpx 20rpx 15rpx 20rpx;

			position: fixed;
			z-index: 99;
			display: flex;
			justify-content: space-between;
			width: 100%;
			box-sizing: border-box;

			.select-tab {
				font-size: 24rpx;

				background-color: rgba(0, 0, 0, .2);
				display: flex;

				.item {
					padding: 5rpx 10rpx;

				}

				.active {
					background-color: rgba(251, 88, 104, .8);
				}
			}
		}

		.wihte-bg {
			background-color: #fff;
			color: #999;

			.select-tab {
				font-size: 24rpx;

				background-color: rgba(0, 0, 0, .2);
				display: flex;
				color: #fff;

				.item {
					padding: 5rpx 10rpx;

				}

				.active {
					background-color: rgba(251, 88, 104, .8);
				}
			}
		}

		.swiper-item {
			image {
				width: 100%;
			}
		}
	}

	.coustom-navbar {
		position: relative;
		box-sizing: border-box;
		border-bottom: 1px solid #cacaca;
		z-index: 9999;
		background-color: #fff;
	}

	.chains-list {
		position: absolute;
		z-index: 99999;
		width: 100vw;
		background-color: #fff;

		.chains-item {
			display: flex;
			justify-content: space-between;
			padding: 10px;
			font-size: 26rpx;
			border-bottom: 1px solid #f0f0f5;
		}

		.current-cinema {
			color: royalblue;
		}
	}
</style>